<template>
  <a-layout style="min-height: 1000px">
    <a-layout-content style="background-color: #F2F2E6">
      <div style="padding-bottom: 20px; width: 80%; margin: auto">
<!--        个人信息卡片-->
        <v-card style="margin-top: 10vh" color="#FFFAF4">
          <v-row>
            <v-col style="padding-left: 3vw; padding-top: 3vh; padding-bottom: 3vh" cols="3">
              <a-avatar shape="square" :size="180" :src="userDTO.profilepic" />
            </v-col>
            <v-col>
              <p style="margin-top: 2vh">
                <span style="font-family: 'Hiragino Sans GB',sans-serif; font-weight: bolder; font-size: 36px; margin-right: 1vw">{{userDTO.nickname}}</span>
                <span style="font-size: 18px; white-space: nowrap; font-family: BlinkMacSystemFont,sans-serif"
                      v-if="userDTO.introduction !== null">
                  {{userDTO.introduction}}
                </span>
              </p>
              <p>
                <span style="font-family: 'Hiragino Sans GB',sans-serif; font-weight: bolder; font-size: 16px">
                  粉丝
                </span>
                <span style="font-family: '华文楷体',sans-serif; font-weight: bolder; font-size: 16px; margin-right: 2vw">
                  {{getDisplayData(fansCount)}}
                </span>
                <span style="font-family: 'Hiragino Sans GB',sans-serif; font-weight: bolder; font-size: 16px">
                  收藏
                </span>
                <span style="font-family: '华文楷体',sans-serif; font-weight: bolder; font-size: 16px; margin-right: 2vw">
                  {{getDisplayData(collectCount)}}
                </span>
                <span style="font-family: 'Hiragino Sans GB',sans-serif; font-weight: bolder; font-size: 16px" v-if="true">
                  评论
                </span>
                <span style="font-family: '华文楷体',sans-serif; font-weight: bolder; font-size: 16px; margin-right: 2vw" v-if="true">
                  {{getDisplayData(commentCount)}}
                </span>
              </p>
              <v-row>
                <v-col cols="1" v-if="userDTO.sex !== null && userDTO.sex !== '保密'">
                  <v-icon style="padding-top: 2vh" v-if="userDTO.sex === '男' || userDTO.sex === '女'">{{userDTO.sex === '男' ? 'mdi-gender-male' : 'mdi-gender-female'}}</v-icon>

                </v-col>
                <v-col>
                  <v-treeview
                    hoverable
                    v-if="info[0].children.length !== 0"
                    dense
                    style="font-family: '微软雅黑 Light',sans-serif; font-weight: bolder"
                    rounded
                    :items="info"
                  ></v-treeview>
                </v-col>
              </v-row>

            </v-col>
            <v-col>
              <v-row type="flex" justify="end" style="padding-top: 3vh; padding-right: 3vw">
                <v-btn rounded
                       large
                       @click="$router.push('/personal/edit')"
                       color="#89B8CA">
                  <span style="font-family: '华文楷体',sans-serif; font-size: 18px; font-weight: bold">编辑资料
                     <v-icon>mdi-square-edit-outline</v-icon>
                  </span>

                </v-btn>
              </v-row>
              <v-row type="flex" justify="end" style="padding-top: 3vh; padding-right: 3vw">
                <v-btn rounded
                       large
                       @click="modalPassVisible = true"
                       color="#f8ebd8">
                  <span style="font-family: '华文楷体',sans-serif; font-size: 18px; font-weight: bold">修改密码
                     <v-icon>mdi-account-key-outline</v-icon>
                  </span>

                </v-btn>
              </v-row>
            </v-col>
          </v-row>

        </v-card>
<!--        内容卡片-->
        <v-row style="margin-top: 2vh">
          <v-col cols="9">
            <!--            左侧主要内容-->
            <v-card >
              <!--              主标签页-->
              <v-tabs
                v-model="tab"
                background-color="#FFFAF4"
                grow
              >
                <v-tab style="font-family: 等线,serif; font-weight: bolder">
                  创意
                  <span>&nbsp;({{listCreativity.length}})</span>
                </v-tab>
                <v-tab style="font-family: 等线,serif; font-weight: bolder">
                  解决方案
                  <span>&nbsp;({{listSolution.length}})</span>
                </v-tab>
                <v-tab style="font-family: 等线,serif; font-weight: bolder" v-if="true">
                  评论
                </v-tab>
                <v-tab style="font-family: 等线,serif; font-weight: bolder">
                  收藏
                  <span>&nbsp;({{ listCCollection.length + listSCollection.length }})</span>
                </v-tab>
                <v-tab style="font-family: 等线,serif; font-weight: bolder">
                  关注
                </v-tab>

              </v-tabs>
              <!--              主标签页内容-->
              <v-tabs-items v-model="tab">
                <!--                发布的创意-->
                <v-tab-item>
                  <v-card color="au_white" flat>
                    <v-card-text>
                      <a-spin tip="Loading..." :spinning="searchLoading">
                        <a-list item-layout="vertical" size="large" :data-source="listCreativity" :pagination="pagination_S" :split="false">
                          <div slot="footer"><b>MindFall</b> Personal Creativity —— 个人创意</div>
                          <a-list-item slot="renderItem" key="item.id" slot-scope="item, index" style="padding-top: 10px; padding-bottom: 15px">
                            <v-card rounded="xl" color="#FFFDF8" class="elevation-0">
                              <v-card-text style="padding-left: 20px; padding-bottom: 0; padding-top: 30px">
                                <!--                    创意名 特征-->
                                <v-row style="padding-left: 1vw">
                                  <!--                      创意名-->
                                  <a class="font-weight-bold text-sm-h6 " @click="visitCreativity(item.id)">{{item.name}}</a>
                                  <v-spacer></v-spacer>
                                  <a-tag
                                    v-for="(item, index) in item.feature"
                                    :key="index"
                                    v-if="index <= 2"
                                    color="#f8ebd8"
                                    style="height: 30px; padding-top:5px; font-size: 14px; margin-right: 2vh; color: #2C2E2D; font-weight:bold; font-family: '华文楷体',sans-serif">
                                    {{ item }}
                                  </a-tag>
                                </v-row>
                                <!--                    创意详情-->
                                <v-row style="padding-left: 1vw; padding-right: 2vw; padding-top: 2vh">
                                  <p>{{item.detail}}</p>
                                </v-row>
                                <!--                    创意统计信息 日期-->
                                <v-row>
                                  <v-col>
                                    <a-icon type="eye" />&emsp;{{getDisplayData(item.view)}}&emsp;&emsp;&emsp;
                                    <a-icon type="star" />&emsp;{{getDisplayData(item.collections)}}&emsp;&emsp;&emsp;
                                    <a-icon type="message" />&emsp;{{getDisplayData(item.comments)}}
                                  </v-col>
                                  <v-col>
                                    <v-row type="flex" justify="end" style="margin-top: 3px; padding-right: 2vw">
                                      <a-icon type="calendar" style="margin-top: 3px"/>&emsp;{{ item.createTime }}
                                    </v-row>
                                  </v-col>
                                </v-row>
                              </v-card-text>
                            </v-card>
                          </a-list-item>
                        </a-list>
                      </a-spin>
                    </v-card-text>
                  </v-card>
                </v-tab-item>
                <!--                发布的方案-->
                <v-tab-item>
                  <v-card color="au_white" flat>
                    <v-card-text>
                      <a-spin tip="Loading..." :spinning="searchLoading">
                        <a-list item-layout="vertical" size="large" :data-source="listSolution" :pagination="pagination_U" :split="false">
                          <div slot="footer"><b>MindFall</b> Personal Solution —— 个人解决方案</div>
                          <!--              搜索结果-->
                          <a-list-item slot="renderItem" key="item.id" slot-scope="item, index" style="padding-top: 10px; padding-bottom: 15px">
                            <v-card rounded="xl" color="#FFFDF8" class="elevation-0">
                              <v-card-text style="padding-left: 20px; padding-bottom: 0; padding-top: 30px">
                                <!--                    方案名 评分-->
                                <v-row style="padding-left: 1vw">
                                  <!--                      方案名-->
                                  <a class="font-weight-bold text-sm-h6 " @click="visit(item.id)">{{item.name}}</a>
                                  <v-spacer></v-spacer>
                                  <!--                      评分-->
                                  <v-rating
                                    v-if="item.score !== null"
                                    v-model="item.score"
                                    background-color="main_1"
                                    color="main_1"
                                    dense
                                    readonly
                                    half-increments
                                    hover
                                    style="padding-right: 1vw"
                                    size="25"></v-rating>
                                  <span v-if="item.score !== null" class="black--text text--lighten-4 mr-4" style="font-size: 15px; padding-top: 3px; padding-right: 2vw">({{ item.score.toFixed(2) }})</span>
                                  <span v-else class="black--text text--lighten-4 mr-4" style="font-size: 15px; padding-top: 3px; padding-right: 2vw">暂无评分</span>
                                </v-row>
                                <!--                    方案详情-->
                                <v-row style="padding-left: 1vw; padding-right: 2vw; padding-top: 2vh">
                                  <p>{{item.detail}}</p>
                                </v-row>
                                <!--                    方案统计信息 日期-->
                                <v-row>
                                  <v-col>
                                    <a-icon type="eye" />&emsp;{{getDisplayData(item.view)}}&emsp;&emsp;&emsp;
                                    <a-icon type="star" />&emsp;{{getDisplayData(item.collections)}}&emsp;&emsp;&emsp;
                                    <a-icon type="message" />&emsp;{{getDisplayData(item.comments)}}
                                  </v-col>
                                  <v-col>
                                    <v-row type="flex" justify="end" style="margin-top: 3px; padding-right: 2vw">
                                      <a-icon type="calendar" style="margin-top: 3px"/>&emsp;{{ item.createTime }}
                                    </v-row>
                                  </v-col>
                                </v-row>
                              </v-card-text>
                            </v-card>
                          </a-list-item>
                        </a-list>
                      </a-spin>
                    </v-card-text>
                  </v-card>
                </v-tab-item>
                <!--                评论列表-->
                <v-tab-item v-if="true">
                  <v-card >
                    <v-tabs
                      v-model="commentTab"
                      background-color="#FFFAF4"
                      grow
                    >
                      <v-tab style="font-family: 等线,serif; font-weight: bolder">
                        我的创意评论
                        <span>&nbsp;({{listCComment.length}})</span>
                      </v-tab>
                      <v-tab style="font-family: 等线,serif; font-weight: bolder">
                        我的方案评论
                        <span>&nbsp;({{listSComment.length}})</span>
                      </v-tab>
                      <v-tab style="font-family: 等线,serif; font-weight: bolder">
                        我发表的评论
                        <span>&nbsp;({{listmyCComment.length + listmySComment.length}})</span>
                      </v-tab>

                    </v-tabs>
                    <v-tabs-items v-model="commentTab">
                      <!--                      我的创意评论-->
                      <v-tab-item>
                        <v-card color="au_white" flat>
                          <v-card-text>
                            <a-spin tip="Loading..." :spinning="searchLoading">
                              <a-list item-layout="vertical" size="large" :data-source="listCComment" :pagination="pagination_CM">
                                <div slot="footer"><b>MindFall</b> —— 我的创意评论</div>
                                <a-list-item slot="renderItem" slot-scope="item, index" style="padding-bottom: 1vh">
                                  <v-row>
                                    <v-col cols="2">
                                      <v-avatar style="margin-left: 1vw; cursor: pointer" :size="32" @click="visitUser(item.userDTO.id)">
                                        <img :src="item.userDTO.profilepic" alt="">
                                      </v-avatar>
                                    </v-col>
                                    <v-col cols="10" style="padding-left: 0; margin-left: -5vw">
                                      <div style="position: relative; top: 50%; transform: translateY(-50%);">
                                        <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; font-weight: bolder; cursor: pointer" @click="visitUser(item.userDTO.id)">{{item.userDTO.nickname}}</span>
                                        <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-left: 1vw">
                                        {{item.relativeTime}}
                                        </span>
                                        <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-left: 1vw">
                                        评论了你的创意
                                        </span>
                                        <a style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-left: 1vw" @click="visitCreativity(item.articleId)">
                                          {{item.name}}
                                        </a>
                                      </div>

                                    </v-col>
                                  </v-row>
                                  <v-row style="padding-top: 0; margin-bottom: 1vh">
                                    <v-col cols="2">
                                    </v-col>
                                    <v-col cols="10" style="padding-left: 0; margin-left: -5vw; padding-top: 0">
                                      <v-banner outlined
                                                shaped
                                                sticky>
                                        {{item.content}}
                                      </v-banner>
                                    </v-col>
                                  </v-row>
                                  <v-row type="flex" justify="end" style="padding-right: 5vw; margin-bottom: 1vh">
                                    <v-btn small style="margin-right: 1vw" text outlined rounded @click="showReply(item, 1)">
                                      快捷回复
                                    </v-btn>
                                    <a-popconfirm placement="top" ok-text="确定" cancel-text="取消" @confirm="deleteCreativeComment(item.id)">
                                      <template slot="title">
                                        <p>确定删除评论吗？其相关子评论也会被删除</p>
                                      </template>
                                      <v-btn small text outlined rounded color="#965454">
                                        删除评论
                                      </v-btn>
                                    </a-popconfirm>
                                  </v-row>
                                </a-list-item>
                              </a-list>
                            </a-spin>
                          </v-card-text>
                        </v-card>
                      </v-tab-item>
                      <!--                      我的方案评论-->
                      <v-tab-item>
                        <v-card color="au_white" flat>
                          <v-card-text>
                            <a-spin tip="Loading..." :spinning="searchLoading">
                              <a-list item-layout="vertical" size="large" :data-source="listSComment" :pagination="pagination_SM">
                                <div slot="footer"><b>MindFall</b> —— 我的方案评论</div>

                                <a-list-item slot="renderItem" slot-scope="item, index" style="padding-bottom: 1vh">
                                  <v-row>
                                    <v-col cols="2">
                                      <v-avatar style="margin-left: 1vw; cursor: pointer" :size="32" @click="visitUser(item.userDTO.id)">
                                        <img :src="item.userDTO.profilepic" alt="">
                                      </v-avatar>
                                    </v-col>
                                    <v-col cols="10" style="padding-left: 0; margin-left: -5vw">
                                      <div style="position: relative; top: 50%; transform: translateY(-50%);">
                                        <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; font-weight: bolder; cursor: pointer" @click="visitUser(item.userDTO.id)">{{item.userDTO.nickname}}</span>
                                        <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-left: 1vw">
                                        {{item.relativeTime}}
                                        </span>
                                        <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-left: 1vw">
                                        评论了你的解决方案
                                        </span>
                                        <a style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-left: 1vw" @click="visit(item.articleId)">
                                          {{item.name}}
                                        </a>
                                      </div>

                                    </v-col>
                                  </v-row>
                                  <v-row style="padding-top: 0; margin-bottom: 1vh">
                                    <v-col cols="2">
                                    </v-col>
                                    <v-col cols="10" style="padding-left: 0; margin-left: -5vw; padding-top: 0">
                                      <v-banner outlined
                                                shaped
                                                sticky>
                                        {{item.content}}
                                      </v-banner>
                                    </v-col>
                                  </v-row>
                                  <v-row type="flex" justify="end" style="padding-right: 5vw; margin-bottom: 1vh">
                                    <v-btn small style="margin-right: 1vw" text outlined rounded @click="showReply(item, 2)">
                                      快捷回复
                                    </v-btn>
                                    <a-popconfirm placement="top" ok-text="确定" cancel-text="取消" @confirm="deleteSolutionComment(item.id)">
                                      <template slot="title">
                                        <p>确定删除评论吗？其相关子评论也会被删除</p>
                                      </template>
                                      <v-btn small text outlined rounded color="#965454">
                                        删除评论
                                      </v-btn>
                                    </a-popconfirm>
                                  </v-row>
                                </a-list-item>
                              </a-list>
                            </a-spin>
                          </v-card-text>
                        </v-card>
                      </v-tab-item>
                      <!--                      我发表的评论-->
                      <v-tab-item>
                        <v-tabs
                          v-model="myCommentTab"
                          background-color="#FFFAF4"
                          grow
                        >
                          <v-tab style="font-family: 等线,serif; font-weight: bolder">
                            我发表的创意评论
                            <span>&nbsp;({{listmyCComment.length}})</span>
                          </v-tab>
                          <v-tab style="font-family: 等线,serif; font-weight: bolder">
                            我发表的解决方案评论
                            <span>&nbsp;({{listmySComment.length}})</span>
                          </v-tab>

                        </v-tabs>
                        <v-tabs-items v-model="myCommentTab">
                          <!--                      我发表的创意评论-->
                          <v-tab-item>
                            <v-card color="au_white" flat>
                              <v-card-text>
                                <a-spin tip="Loading..." :spinning="searchLoading">
                                  <a-list item-layout="vertical" size="large" :data-source="listmyCComment" :pagination="pagination_MCM">
                                    <div slot="footer"><b>MindFall</b> —— 我发表的创意评论</div>

                                    <a-list-item slot="renderItem" slot-scope="item, index" style="padding-bottom: 1vh">
                                      <v-row>
                                        <v-col cols="2">
                                          <v-avatar style="margin-left: 1vw" :size="32">
                                            <img :src="item.userDTO.profilepic" alt="">
                                          </v-avatar>
                                        </v-col>
                                        <v-col cols="10" style="padding-left: 0; margin-left: -5vw">
                                          <div style="position: relative; top: 50%; transform: translateY(-50%);">
                                            <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; font-weight: bolder;">我</span>
                                            <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-left: 1vw">
                                        {{item.relativeTime}}
                                        </span>
                                            <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-left: 1vw">
                                        评论了创意
                                        </span>
                                            <a style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-left: 1vw" @click="visitCreativity(item.articleId)">
                                              {{item.name}}
                                            </a>
                                          </div>

                                        </v-col>
                                      </v-row>
                                      <v-row style="padding-top: 0; margin-bottom: 1vh">
                                        <v-col cols="2">
                                        </v-col>
                                        <v-col cols="10" style="padding-left: 0; margin-left: -5vw; padding-top: 0">
                                          <v-banner outlined
                                                    shaped
                                                    sticky>
                                            {{item.content}}
                                          </v-banner>
                                        </v-col>
                                      </v-row>
                                      <v-row type="flex" justify="end" style="padding-right: 5vw; margin-bottom: 1vh">
                                        <a-popconfirm placement="top" ok-text="确定" cancel-text="取消" @confirm="deleteCreativeComment(item.id)">
                                          <template slot="title">
                                            <p>确定删除评论吗？其相关子评论也会被删除</p>
                                          </template>
                                          <v-btn small text outlined rounded color="#965454">
                                            删除评论
                                          </v-btn>
                                        </a-popconfirm>
                                      </v-row>
                                    </a-list-item>
                                  </a-list>
                                </a-spin>
                              </v-card-text>
                            </v-card>
                          </v-tab-item>
                          <!--                      我发表的方案评论-->
                          <v-tab-item>
                            <v-card color="au_white" flat>
                              <v-card-text>
                                <a-spin tip="Loading..." :spinning="searchLoading">
                                  <a-list item-layout="vertical" size="large" :data-source="listmySComment" :pagination="pagination_MSM">
                                    <div slot="footer"><b>MindFall</b> —— 我发表的解决方案评论</div>

                                    <a-list-item slot="renderItem" slot-scope="item, index" style="padding-bottom: 1vh">
                                      <v-row>
                                        <v-col cols="2">
                                          <v-avatar style="margin-left: 1vw" :size="32">
                                            <img :src="item.userDTO.profilepic" alt="">
                                          </v-avatar>
                                        </v-col>
                                        <v-col cols="10" style="padding-left: 0; margin-left: -5vw">
                                          <div style="position: relative; top: 50%; transform: translateY(-50%);">
                                            <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; font-weight: bolder;">我</span>
                                            <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-left: 1vw">
                                        {{item.relativeTime}}
                                        </span>
                                            <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-left: 1vw">
                                        评论了解决方案
                                        </span>
                                            <a style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-left: 1vw" @click="visit(item.articleId)">
                                              {{item.name}}
                                            </a>
                                          </div>

                                        </v-col>
                                      </v-row>
                                      <v-row style="padding-top: 0; margin-bottom: 1vh">
                                        <v-col cols="2">
                                        </v-col>
                                        <v-col cols="10" style="padding-left: 0; margin-left: -5vw; padding-top: 0">
                                          <v-banner outlined
                                                    shaped
                                                    sticky>
                                            {{item.content}}
                                          </v-banner>
                                        </v-col>
                                      </v-row>
                                      <v-row type="flex" justify="end" style="padding-right: 5vw; margin-bottom: 1vh">
                                        <a-popconfirm placement="top" ok-text="确定" cancel-text="取消" @confirm="deleteSolutionComment(item.id)">
                                          <template slot="title">
                                            <p>确定删除评论吗？其相关子评论也会被删除</p>
                                          </template>
                                          <v-btn small text outlined rounded color="#965454">
                                            删除评论
                                          </v-btn>
                                        </a-popconfirm>
                                      </v-row>
                                    </a-list-item>
                                  </a-list>
                                </a-spin>
                              </v-card-text>
                            </v-card>
                          </v-tab-item>
                        </v-tabs-items>

                      </v-tab-item>

                    </v-tabs-items>
                  </v-card>
                </v-tab-item>
                <!--                收藏列表-->
                <v-tab-item>
                  <v-card >
                    <v-tabs
                      v-model="collectionTab"
                      background-color="#FFFAF4"
                      grow
                    >
                      <v-tab style="font-family: 等线,serif; font-weight: bolder">
                        收藏的创意
                        <span>&nbsp;({{listCCollection.length}})</span>
                      </v-tab>
                      <v-tab style="font-family: 等线,serif; font-weight: bolder">
                        收藏的解决方案
                        <span>&nbsp;({{listSCollection.length}})</span>
                      </v-tab>

                    </v-tabs>
                    <v-tabs-items v-model="collectionTab">
                      <v-tab-item>
                        <v-card color="au_white" flat>
                          <v-card-text>
                            <a-spin tip="Loading..." :spinning="searchLoading">
                              <a-list item-layout="vertical" size="large" :data-source="listCCollection" :pagination="pagination_CC" :split="false">
                                <div slot="footer"><b>MindFall</b> Creativity Collection —— 收藏的创意</div>
                                <a-list-item slot="renderItem" key="item.id" slot-scope="item, index" style="padding-top: 10px; padding-bottom: 15px">
                                  <v-card rounded="xl" color="#FFFDF8" class="elevation-0">
                                    <v-card-text style="padding-left: 20px; padding-bottom: 0; padding-top: 30px">
                                      <!--                    创意名 特征-->
                                      <v-row style="padding-left: 1vw">
                                        <!--                      创意名-->
                                        <a class="font-weight-bold text-sm-h6 " @click="visitCreativity(item.id)">{{item.name}}</a>
                                        <v-spacer></v-spacer>
                                        <a-tag
                                          v-for="(item, index) in item.feature"
                                          :key="index"
                                          v-if="index <= 2"
                                          color="#f8ebd8"
                                          style="height: 30px; padding-top:5px; font-size: 14px; margin-right: 2vh; color: #2C2E2D; font-weight:bold; font-family: '华文楷体',sans-serif">
                                          {{ item }}
                                        </a-tag>
                                        <a-popconfirm placement="top" ok-text="确定" cancel-text="取消" @confirm="cancelCollectCreative(item.id)">
                                          <template slot="title">
                                            <p> 确定取消收藏吗？</p>
                                            <p>{{ text }}</p>
                                          </template>
                                          <v-btn icon style="margin-right: 2vh; margin-top: -3px">
                                            <v-icon>mdi-archive-cancel-outline</v-icon>
                                          </v-btn>
                                        </a-popconfirm>


                                      </v-row>
                                      <!--                    创意详情-->
                                      <v-row style="padding-left: 1vw; padding-right: 2vw; padding-top: 2vh">
                                        <p>{{item.detail}}</p>
                                      </v-row>
                                      <!--                    创意统计信息 日期-->
                                      <v-row>
                                        <v-col>
                                          <a-icon type="eye" />&emsp;{{getDisplayData(item.view)}}&emsp;&emsp;&emsp;
                                          <a-icon type="star" />&emsp;{{getDisplayData(item.collections)}}&emsp;&emsp;&emsp;
                                          <a-icon type="message" />&emsp;{{getDisplayData(item.comments)}}
                                        </v-col>
                                        <v-col>
                                          <v-row type="flex" justify="end" style="margin-top: 3px; padding-right: 2vw">
                                            <a-icon type="calendar" style="margin-top: 3px"/>&emsp;{{ item.createTime }}
                                          </v-row>
                                        </v-col>
                                      </v-row>
                                    </v-card-text>
                                  </v-card>
                                </a-list-item>
                              </a-list>
                            </a-spin>
                          </v-card-text>
                        </v-card>
                      </v-tab-item>

                      <v-tab-item>
                        <v-card color="au_white" flat>
                          <v-card-text>
                            <a-spin tip="Loading..." :spinning="searchLoading">
                              <a-list item-layout="vertical" size="large" :data-source="listSCollection" :pagination="pagination_SC" :split="false">
                                <div slot="footer"><b>MindFall</b> Solution Collection —— 收藏的解决方案</div>
                                <!--              搜索结果-->
                                <a-list-item slot="renderItem" key="item.id" slot-scope="item, index" style="padding-top: 10px; padding-bottom: 15px">
                                  <v-card rounded="xl" color="#FFFDF8" class="elevation-0">
                                    <v-card-text style="padding-left: 20px; padding-bottom: 0; padding-top: 30px">
                                      <!--                    方案名 评分-->
                                      <v-row style="padding-left: 1vw">
                                        <!--                      方案名-->
                                        <a class="font-weight-bold text-sm-h6 " @click="visit(item.id)">{{item.name}}</a>
                                        <v-spacer></v-spacer>
                                        <!--                      评分-->
                                        <v-rating
                                          v-if="item.score !== null"
                                          v-model="item.score"
                                          background-color="main_1"
                                          color="main_1"
                                          dense
                                          readonly
                                          half-increments
                                          hover
                                          style="padding-right: 1vw"
                                          size="25"></v-rating>
                                        <span v-if="item.score !== null" class="black--text text--lighten-4 mr-4" style="font-size: 15px; padding-top: 3px; padding-right: 1vw">({{ item.score.toFixed(2) }})</span>
                                        <span v-else class="black--text text--lighten-4 mr-4" style="font-size: 15px; padding-top: 3px; padding-right: 1vw">暂无评分</span>
                                        <a-popconfirm placement="top" ok-text="确定" cancel-text="取消" @confirm="cancelCollectSolution(item.id)">
                                          <template slot="title">
                                            <p> 确定取消收藏吗？</p>
                                            <p>{{ text }}</p>
                                          </template>
                                          <v-btn icon style="margin-right: 2vh; margin-top: -3px">
                                            <v-icon>mdi-archive-cancel-outline</v-icon>
                                          </v-btn>
                                        </a-popconfirm>
                                      </v-row>
                                      <!--                    方案详情-->
                                      <v-row style="padding-left: 1vw; padding-right: 2vw; padding-top: 2vh">
                                        <p>{{item.detail}}</p>
                                      </v-row>
                                      <!--                    方案统计信息 日期-->
                                      <v-row>
                                        <v-col>
                                          <a-icon type="eye" />&emsp;{{getDisplayData(item.view)}}&emsp;&emsp;&emsp;
                                          <a-icon type="star" />&emsp;{{getDisplayData(item.collections)}}&emsp;&emsp;&emsp;
                                          <a-icon type="message" />&emsp;{{getDisplayData(item.comments)}}
                                        </v-col>
                                        <v-col>
                                          <v-row type="flex" justify="end" style="margin-top: 3px; padding-right: 2vw">
                                            <a-icon type="calendar" style="margin-top: 3px"/>&emsp;{{ item.createTime }}
                                          </v-row>
                                        </v-col>
                                      </v-row>
                                    </v-card-text>
                                  </v-card>
                                </a-list-item>
                              </a-list>
                            </a-spin>
                          </v-card-text>
                        </v-card>
                      </v-tab-item>

                    </v-tabs-items>
                  </v-card>
                </v-tab-item>
                <!--                关注&粉丝列表-->
                <v-tab-item>
                  <v-card >
                    <v-tabs
                      v-model="followTab"
                      background-color="#FFFAF4"
                      grow
                    >
                      <v-tab style="font-family: 等线,serif; font-weight: bolder">
                        我的关注
                        <span>&nbsp;({{listFollow.length}})</span>
                      </v-tab>
                      <v-tab style="font-family: 等线,serif; font-weight: bolder">
                        我的粉丝
                        <span>&nbsp;({{listFan.length}})</span>
                      </v-tab>
                    </v-tabs>
                    <v-tabs-items v-model="followTab">
                      <v-tab-item>
                        <v-card color="au_white" flat>
                          <v-card-text>
                            <a-spin tip="Loading..." :spinning="searchLoading">
                              <a-list item-layout="vertical" size="large" :data-source="listFollow" :pagination="pagination_FF">
                                <div slot="footer"><b>MindFall</b> —— 我的关注</div>

                                <a-list-item slot="renderItem" slot-scope="item, index" style="padding-bottom: 2vh">
                                  <v-row>
                                    <v-col cols="2">
                                      <v-avatar style="margin-left: 1vw; cursor: pointer" :size="64" @click="visitUser(item.userDTO.id)">
                                        <img :src="item.userDTO.profilepic" alt="">
                                      </v-avatar>
                                    </v-col>
                                    <v-col cols="8" style="padding-left: 0; margin-left: -2vw">
                                      <a class="font-weight-bold text-sm-h6 " @click="visitUser(item.userDTO.id)">{{item.userDTO.nickname}}</a>
                                      <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 14px; font-weight: bolder; margin-left: 1vw">
                                          <span>{{item.creatives}}创意</span>
                                          <span style="margin-left: 5px; margin-right: 5px">·</span>
                                          <span>{{item.solutions}}方案</span>
                                          <span style="margin-left: 5px; margin-right: 5px">·</span>
                                          <span>{{item.followers}}粉丝</span>
                                        </span>
                                      <p style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-top: 1vh; color: #646464">{{item.introduction}}</p>
                                    </v-col>
                                    <v-col cols="2">
                                      <v-btn
                                        @click="follow(index)"
                                        elevation="1"
                                        color="main_2"
                                        v-if="!followArray[index]"
                                        style="position: relative; top: 50%; transform: translateY(-50%); margin-left: 1vw; font-family: BlinkMacSystemFont,sans-serif; font-size: 15px;">
                                        <v-icon>mdi-plus</v-icon>关注
                                      </v-btn>
                                      <a-popconfirm placement="top" ok-text="确定" cancel-text="取消" @confirm="cancelFollow(index)" v-else>
                                        <template slot="title">
                                          <p>确定取消关注吗？</p>
                                        </template>
                                        <v-btn
                                          elevation="1"
                                          color="main_1"
                                          @click=""
                                          style="position: relative; top: 50%; transform: translateY(-50%); margin-left: 1vw; font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; color: snow">
                                          取消关注
                                        </v-btn>
                                      </a-popconfirm>

                                    </v-col>
                                  </v-row>
                                </a-list-item>
                              </a-list>
                            </a-spin>
                          </v-card-text>
                        </v-card>
                      </v-tab-item>
                      <v-tab-item>
                        <v-card color="au_white" flat>
                          <v-card-text>
                            <a-spin tip="Loading..." :spinning="searchLoading">
                              <a-list item-layout="vertical" size="large" :data-source="listFan" :pagination="pagination_FA">
                                <div slot="footer"><b>MindFall</b> —— 我的粉丝</div>

                                <a-list-item slot="renderItem" slot-scope="item, index" style="padding-bottom: 2vh">
                                  <v-row>
                                    <v-col cols="2">
                                      <v-avatar style="margin-left: 1vw; cursor: pointer" :size="64" @click="visitUser(item.userDTO.id)">
                                        <img :src="item.userDTO.profilepic" alt="">
                                      </v-avatar>
                                    </v-col>
                                    <v-col cols="8" style="padding-left: 0; margin-left: -2vw">
                                      <a class="font-weight-bold text-sm-h6 " @click="visitUser(item.userDTO.id)">{{item.userDTO.nickname}}</a>
                                      <span style="font-family: BlinkMacSystemFont,sans-serif; font-size: 14px; font-weight: bolder; margin-left: 1vw">
                                          <span>{{item.creatives}}创意</span>
                                          <span style="margin-left: 5px; margin-right: 5px">·</span>
                                          <span>{{item.solutions}}方案</span>
                                          <span style="margin-left: 5px; margin-right: 5px">·</span>
                                          <span>{{item.followers}}粉丝</span>
                                        </span>
                                      <p style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px; margin-top: 1vh; color: #646464">
                                        {{item.introduction}}
                                      </p>
                                    </v-col>
                                  </v-row>
                                </a-list-item>
                              </a-list>
                            </a-spin>
                          </v-card-text>
                        </v-card>
                      </v-tab-item>

                    </v-tabs-items>
                  </v-card>
                </v-tab-item>

              </v-tabs-items>
            </v-card>
          </v-col>
          <v-col cols="3" style="padding-left: 2px" >

            <v-card color="#FFFAF4" style="padding-bottom: 3vh">
              <a-page-header
                style="border: 1px solid rgb(235, 237, 240)"
                title="传送门"
                :back-icon="false"
                sub-title="前往管理你的专利笔记、创意、解决方案和创新引导"
              />
              <div style="margin-left: 1vw; margin-right: 1vw; font-family: '华文楷体',sans-serif">
                <v-list nav style="background-color: transparent">
                  <v-list-item-group v-model="selectedItem" color="primary">
                    <v-list-item v-for="(item, i) in items" :key="i" @click="handleTrans(i)">
                      <v-list-item-icon>
                        <v-icon v-text="item.icon"></v-icon>
                      </v-list-item-icon>

                      <v-list-item-content>
                        <v-list-item-title v-text="item.text" style="font-weight: bold"></v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>
                  </v-list-item-group>
                </v-list>

              </div>

            </v-card>
          </v-col>
        </v-row>

      </div>
      <v-dialog
        v-if="dialog"
        v-model="dialog"
        max-width="600"
      >
        <v-card class="rounded-xl">
          <v-card-title class="text-h6">
            回复{{commentObj.userDTO.nickname}}
          </v-card-title>

          <v-card-text style="padding-bottom: 0; padding-top: 1vh">
            <v-textarea
              outlined
              v-model="commentContent"
              maxlength="200"
              :counter="200"
              name="input-7-4"
              label="评论内容"
            ></v-textarea>
          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>

            <v-btn
              color="#965454"
              text
              @click="dialog = false"
            >
              取消
            </v-btn>
            <v-btn
              :disabled="commentContent.split('\n').join('').split(' ').join('').length === 0"
              color="main_1"
              text
              @click="reply"
            >
              回复
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

        <a-modal
          v-model="modalPassVisible"
          title="修改密码"
          centered
          @cancel="resetChangeModel"
          @ok="changePassWord"
        >
          <a-spin :spinning="spinning">
            <v-row>
              <v-col cols="2" style="position: relative">
              <span style="position: absolute; top: 50%; transform: translateY(-50%);">
                新密码
              </span>
              </v-col>
              <v-col>
                <a-input-password placeholder="请输入新密码" v-model="changePassForm.password" :visibilityToggle="false"/>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="2" style="position: relative">
              <span style="position: absolute; top: 50%; transform: translateY(-50%);">
                确认密码
              </span>
              </v-col>
              <v-col>
                <a-input-password placeholder="请确认密码" v-model="changePassForm.checkPass" :visibilityToggle="false"/>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="2" style="position: relative">
              <span style="position: absolute; top: 50%; transform: translateY(-50%);">
                绑定邮箱
              </span>
              </v-col>
              <v-col>
                <a-input v-model="email" disabled />
              </v-col>
            </v-row>
            <v-row style="padding: 2vh 1vw 1vh;">
              <v-btn :disabled="!canClick" block elevation="0" :loading="changeLoading"
                     @click="getVerificationCode">{{ getCodeText }}</v-btn>
            </v-row>
            <v-row>
              <v-col cols="2" style="position: relative">
              <span style="position: absolute; top: 40%; transform: translateY(-50%);">
                验证码
              </span>
              </v-col>
              <v-col>
                <div style="max-width: 15vw">
                  <v-otp-input length="6" type="number" v-model="changePassForm.code" :key="codeKey"></v-otp-input>
                </div>
              </v-col>
            </v-row>
          </a-spin>

        </a-modal>


    </a-layout-content>
  </a-layout>
</template>

<script>
  import request from "../utils/request";

  export default {
    name: "Person",
    created() {
      this.getFansCount()
      this.loadDetails()
      this.loadCollections_C()
      this.loadCollections_S()
      this.loadFans()
      this.loadFollow()
      this.loadComments()
    },
    computed:{
    },
    data () {
      return {
        getCodeText: '获取邮箱验证码',
        canClick: true, // 验证码是否禁用
        totalTime: 60,
        codeKey: 0,
        spinning: false,
        changeLoading: false,
        modalPassVisible: false,
        followArray: [],
        selectedItem: -1,
        items: [
          { text: '我的专利笔记', icon: 'mdi-notebook-check-outline', path: '/personal/note'},
          { text: '我的创意仓库', icon: 'mdi-lightbulb-on-outline', path: '/personal/creativity'},
          { text: '我的解决方案仓库', icon: 'mdi-book-search-outline', path: '/personal/solution'},
          { text: '我的创新引导', icon: 'mdi-map-marker-radius-outline', path: '/personal/guide' },
        ],
        commentObj: {}, // 要评论的对象
        commentContent: '', // 评论内容
        commentType: 0, // 评论类型
        dialog: false,
        searchLoading: false,
        userDTO: {}, // 当前页面用户信息
        fansCount: 0, // 粉丝数
        commentCount: 0, // 评论数
        collectCount: 0, // 收藏数
        changePassForm: {},
        info: [
          {
            id: 1,
            name: '查看详细资料',
            children: [],
          },
        ], // 用户信息
        email: '', //用户绑定邮箱
        tab: null, //标签页
        collectionTab: null, // 收藏子标签页
        followTab: null, // 关注子标签页
        commentTab: null, // 评论子标签页
        myCommentTab: null, // 我发表的评论标签页

        listCreativity: [], //个人创意列表
        listSolution: [], //个人方案列表
        listCCollection: [], // 收藏创意列表
        listSCollection: [], // 收藏方案列表
        listCComment: [], // 创意评论列表
        listSComment: [], // 方案评论列表
        listmyCComment: [], // 我发表的创意评论
        listmySComment: [], // 我发表的方案评论
        listFollow: [], // 关注列表
        listFan: [], // 粉丝列表

        pagination_U: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        }, // 创意分页
        pagination_S: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        }, // 方案分页
        pagination_CC: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        }, // 收藏的创意分页
        pagination_SC: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        }, // 收藏的解决方案分页
        pagination_FF: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 10,
        }, // 关注分页
        pagination_FA: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 10,
        }, // 粉丝分页
        pagination_CM: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 10,
        }, // 创意评论分页
        pagination_SM: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 10,
        }, // 方案评论分页
        pagination_MCM: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 10,
        }, // 发布创意评论分页
        pagination_MSM: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 10,
        }, // 发布方案评论分页
      }
    },
    methods:{
      // 数据格式化
      getDisplayData(data){
        if(data >= 10000) {
          return data = Math.floor(data/10000) + "万+"
        }
        else
          return data
      },
      // 粉丝数
      getFansCount(){
        request.get('/follow/findFollower').then(res => {
          if (res.code === '200'){
            // console.log(res.data)
            this.fansCount = res.data.length
          }
        })
      },
      // 加载主页信息
      loadDetails(){
        this.info[0].children = []
        request.get('/user/getMyHome').then(result => {
          if (result.code === '200'){
            document.title = '用户主页-' + result.data.userDTO.nickname
            this.userDTO = result.data.userDTO
            this.email = result.data.email
            if (result.data.address !== null)
              this.info[0].children.push({id: 2, name: '居住地：' + result.data.address})
            if (result.data.occupation !== null)
              this.info[0].children.push({id: 2, name: '所在行业：' + result.data.occupation})
            this.userDTO.sex = result.data.sex
            this.userDTO.introduction = result.data.introduction
            this.listCreativity = result.data.creativeHomeDTOS
            this.listSolution = result.data.solutionAllDTOS
            for (let j = 0; j < result.data.creativeHomeDTOS.length; j++){
              this.commentCount += result.data.creativeHomeDTOS[j].comments
              this.collectCount += result.data.creativeHomeDTOS[j].collections
            }
            for (let k = 0; k < result.data.solutionAllDTOS.length; k++){
              this.commentCount += result.data.solutionAllDTOS[k].comments
              this.collectCount += result.data.solutionAllDTOS[k].collections
            }
          }
        })
      },
      // 评论列表
      loadComments(){
        request.get('/user/CommentsCenter').then(result => {
          if (result.code === '200'){
            this.listCComment = result.data.myCreative
            this.listSComment = result.data.mySolution
            this.listmyCComment = result.data.toCreative
            this.listmySComment = result.data.toSolution
          }
        })
      },
      // 删除创意评论
      deleteCreativeComment(id){
        request.delete('/c-comment/' + id).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('删除成功')
            this.loadComments()
          }
          else{
            this.sendWarnMessage(res.msg)
            this.loadComments()
          }

        })
      },
      // 删除方案评论
      deleteSolutionComment(id){
        request.delete('/s-comment/' + id).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('删除成功')
            this.loadComments()
          }
          else{
            this.sendWarnMessage(res.msg)
            this.loadComments()
          }
        })
      },
      // 加载创意收藏信息
      loadCollections_C(){
        request.get('/c-collection/getMine').then(result => {
          if (result.code === '200'){
            this.listCCollection = result.data
          }
        })
      },
      // 加载方案收藏信息
      loadCollections_S(){
        request.get('/s-collection/getMine').then(result => {
          if (result.code === '200'){
            this.listSCollection = result.data
          }
        })
      },
      // 加载关注列表
      loadFollow(){
        request.get('/follow/findFollowee').then(result => {
          if (result.code === '200'){
            this.listFollow = result.data
            this.followArray = new Array(result.data.length).fill(true)
          }
        })
      },
      // 加载粉丝列表
      loadFans(){
        request.get('/follow/findFollower').then(result => {
          if (result.code === '200'){
            this.listFan = result.data
          }
        })
      },
      follow(index){
        let followObj = {}
        followObj.userId = -1
        followObj.fouserId = this.listFollow[index].userDTO.id
        request.post('/follow/insertFollow', followObj).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('关注成功')
            this.$set(this.followArray, index, true)
          }
          else {
            this.sendWarnMessage('关注失败')
            this.loadFollow()
          }
        })
      },
      cancelCollectSolution(id){
        request.delete('/s-collection', {
          params:{
            solutionId: id
          }
        }).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('取消收藏成功')
            this.collectState = false
            this.loadCollections_S()
          }else {
            this.sendWarnMessage('取消收藏失败')
            this.loadCollections_S()
          }
        })
      },
      cancelCollectCreative(id){
        request.delete('/c-collection', {
          params:{
            creativeId: id
          }
        }).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('取消收藏成功')
            this.collectState = false
            this.loadCollections_C()
          }
          else {
            this.sendWarnMessage('取消收藏失败')
            this.loadCollections_C()
          }
        })
      },
      // 取消关注
      cancelFollow(index){
        request.delete('/follow/deleteFollow', {
          params:{
            fouserId: this.listFollow[index].userDTO.id
          }
        }).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('取消关注成功')
            this.$set(this.followArray, index, false)
          }
          else {
            this.sendWarnMessage('取消关注失败')
            this.loadFollow()
          }
        })
      },

      showReply(comment, type){
        this.commentObj = comment
        this.commentType = type
        this.dialog = true
      },
      reply(){
        let toReply = {}
        toReply.content = this.commentContent
        toReply.pid = this.commentObj.id
        toReply.originId = this.getOriginId(this.commentObj)
        if (this.commentType === 1){
          toReply.creativeId = this.commentObj.articleId
          request.post('/c-comment', toReply).then(res1 => {
            // console.log(res1)
            if (res1.code === '200')
              this.sendSuccessMessage('评论成功')
            else
              this.sendWarnMessage(res1.msg)
            this.dialog = false
            this.loadComments()
            this.commentContent = ''
          })
        }
        else if (this.commentType === 2){
          toReply.solutionId = this.commentObj.articleId
          request.post('/s-comment', toReply).then(res2 => {
            if (res2.code === '200')
              this.sendSuccessMessage('评论成功')
            else
              this.sendWarnMessage(res2.msg)
            this.dialog = false
            this.loadComments()
            this.commentContent = ''
          })
        }
       },
      getOriginId(comment){
        return comment.originId === null ? comment.id : comment.originId
      },
      // 打开一个方案并跳转
      visit(id){
        request.get('/solution', {
          params: {
            id: id
          }
        }).then(res =>{
          if (res.code === '200'){
            if(res.data.statement !== '已发布'){
              let notfoundUrl = this.$router.resolve({path: "/solution404"});
              window.open(notfoundUrl.href, '_blank');
            }
            else{
              request.post('/solution/updateView', {id: parseInt(id)}).then(res => {
                let routeUrl = this.$router.resolve({
                  path: "/solutionInfo",
                  query:{solution: window.btoa(window.encodeURIComponent(id))}
                });
                window.open(routeUrl.href, '_blank');
              })
            }
          }
          else {
            let notfoundUrl = this.$router.resolve({path: "/solution404"});
            window.open(notfoundUrl.href, '_blank');
          }
        })
      },
      // 打开一个创意并跳转
      visitCreativity(id){
        request.get('/creative/' + id).then(res =>{
          if (res.code === '200'){
            if(res.data.statement !== '已发布'){
              let notfoundUrl = this.$router.resolve({path: "/creative404"});
              window.open(notfoundUrl.href, '_blank');
            }
            else{
              request.post('/creative/updateView', {id: parseInt(id)}).then(res => {
                let routeUrl = this.$router.resolve({
                  path: "/creativeInfo",
                  query:{creative: window.btoa(window.encodeURIComponent(id))}
                });
                window.open(routeUrl.href, '_blank');
              })
            }
          }
          else {
            let notfoundUrl = this.$router.resolve({path: "/creative404"});
            window.open(notfoundUrl.href, '_blank');
          }
        })
      },
      // 访问用户主页
      visitUser(id) { //打开一个用户的个人主页
        let routeUrl = this.$router.resolve({
          path: "/userInfo",
          query:{user: window.btoa(window.encodeURIComponent(id))}
        });
        window.open(routeUrl.href, '_blank');
      },
      handleTrans(i){
        this.selectedItem = i
        let routeUrl = this.$router.resolve({path: this.items[i].path})
        window.open(routeUrl.href, '_blank');
      },
      // 重置修改密码对话框
      resetChangeModel(){
        this.changePassForm.password = ''
        this.changePassForm.checkPass = ''
        this.changePassForm.code = ''
        this.codeKey += 1
        // this.$set(this.changePassForm, 'code', '')
        this.modalPassVisible = false
      },
      // 注册验证码倒计时
      getVerificationCode () {
        if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(this.changePassForm.password) === false
          || /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(this.changePassForm.checkPass) === false){
          this.sendWarnMessage('密码格式不正确：密码至少包含数字和英文，长度6-20')
          return
        }
        if (this.changePassForm.password !== this.changePassForm.checkPass){
          this.sendWarnMessage('两次输入密码不一致')
          return
        }
        this.changeLoading = true
        request.get('/user/getCode', {
          params:{
            to: this.email
          }
        }).then(res => {
          this.changeLoading = false
          if (res.code === '200'){
            this.sendSuccessMessage('验证码已发送到您的邮箱，三分钟内有效。')
            if (!this.canClick) return
            this.canClick = false
            this.getCodeText = this.totalTime + 's后重新发送'
            let clock = window.setInterval(() => {
              this.totalTime--
              this.getCodeText = this.totalTime + 's后重新发送'
              if (this.totalTime < 0) {
                window.clearInterval(clock)
                this.getCodeText = '重新发送验证码'
                this.totalTime = 60
                this.canClick = true
              }
            },1000)
          }
          else
            this.sendWarnMessage(res.msg)
        })
      },
      // 修改密码
      changePassWord() {
        if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(this.changePassForm.password) === false
          || /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(this.changePassForm.checkPass) === false){
          this.sendWarnMessage('密码格式不正确：密码至少包含数字和英文，长度6-20')
          return
        }
        if (this.changePassForm.password !== this.changePassForm.checkPass){
          this.sendWarnMessage('两次输入密码不一致')
          return
        }
        if (this.changePassForm.code === '' || this.changePassForm.code === null || this.changePassForm.code === undefined || this.changePassForm.code.length < 6){
          this.sendWarnMessage('请输入完整验证码')
          return
        }
        this.spinning = true
        request.get('/user/setPassword', {
          params: {
            email: this.email,
            password: this.changePassForm.password,
            code: this.changePassForm.code
          }
        }).then(res => {
          this.spinning = false
          if (res.code === '200'){
            this.sendSuccessMessage('密码修改成功')
            this.resetChangeModel()
          }
          else {
            this.sendWarnMessage(res.msg)
          }
        })


      }
    }
  }
</script>

<style>
  .basil {
    background-color: #F2F2E6 !important;
  }
  .basil--text {
    color: #89B8CA !important;
  }
  .v-application ul, .v-application ol{
    padding-left: 0 !important;
  }
  .ant-modal-body{
    padding-bottom: 5px !important;
  }
  .el-collapse-item__content{
    padding-bottom: 2vh !important;
    background-color: #FFFAF4;
  }
  .el-collapse{
    background-color: #FFFAF4;
    border-top: transparent !important;
    border-bottom: transparent !important;
  }
  .el-collapse-item__header{
    height: 4vh;
    background-color: #FFFAF4;
    border-bottom: transparent !important;
  }
  .v-application ul, .v-application ol{
    padding-left: 0 !important;
  }
  a:hover{
    color: #c1cbd7;
  }
  .v-text-field--filled > .v-input__control > .v-input__slot, .v-text-field--full-width > .v-input__control > .v-input__slot, .v-text-field--outlined > .v-input__control > .v-input__slot{
    min-height: 4vh !important;
  }
  .v-dialog{
    box-shadow: none !important;
  }

</style>
